<template>
  <div class="ModuleTitle">
      <div class="leftTitle">
          <span class="main">
              <slot name="mainTitle"></slot>
              <span class="small"><slot name="smallTitle"></slot></span>
          </span>
          <span class="sub"><slot name="subTitle"></slot></span>
      </div>
      <div class="rightTitle">
          <router-link :to="'/' + (url ? url : '')">
              <span>更多</span>
              <van-icon name="arrow" color="#9a9a9a" size="0.3rem"/>
          </router-link>
      </div>
  </div>
</template>

<script>
export default {
    props:['url']
}
</script>

<style lang="less">
.ModuleTitle{
    width: 100%;
    height: 70px;
    padding: 15px 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .leftTitle{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .main{
            font-weight: bold;
            font-size: 14px;
            .small{
                color: red;
                font-size: 12px;
            }
        }
        .sub{
            font-size: 12px;
            color: #999999;
        }
    }
    .rightTitle{
        a{
            span{
                font-size: 14px;
                margin-right: 2px;
                vertical-align: 2px; /* no */
            }
        }
    }
}
</style>